<template>
  <div class="experiment-layout">
    <!-- 实验说明部分 -->
    <Card
      title="实验原理"
      padding
      margin-bottom
      content-padding
      class="theory-section"
    >
      <slot name="theory"></slot>
    </Card>

    <!-- 数据记录部分 -->
    <Card padding margin-bottom class="data-section">
      <template #title>
        <slot name="data-title">实验数据</slot>
      </template>
      <template #actions>
        <slot name="data-actions"></slot>
      </template>
      <slot name="data"></slot>
    </Card>

    <!-- 数据处理部分 -->
    <Card
      title="数据处理"
      padding
      margin-bottom
      content-padding
      class="processing-section"
    >
      <slot name="processing"></slot>
    </Card>

    <!-- 误差分析部分 -->
    <Card title="误差分析" padding content-padding class="error-section">
      <slot name="error-analysis"></slot>
    </Card>
  </div>
</template>

<script setup lang="ts">
import Card from "./Card.vue";
</script>

<style scoped>
.experiment-layout {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.theory-section {
  background-color: #fff;
}

.data-section {
  background-color: #fff;
}

.processing-section {
  background-color: #fff;
}

.error-section {
  background-color: #fff;
}

/* 响应式调整 */
@media (max-width: 640px) {
  .experiment-layout {
    padding: 16px;
  }
}

@media (min-width: 1024px) {
  .experiment-layout {
    padding: 24px;
  }
}
</style>
